<template>
  <div id="settingPage">
    <div class="outLoginDiv" @click="changepwd" style="margin-top: 1.3333333333333333rem;">
      <div class="contentDiv">
        <div class="title">修改密码</div>
        <img :src="rightArrow" class="rightarrow" />
      </div>

    </div>

    <div class="outLoginDiv" @click="showOutlogin">

      <div class="contentDiv" style="border-bottom: 0.5px solid white;">
        <div class="title">退出登录</div>
        <img :src="rightArrow" class="rightarrow" />
      </div>

    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Dialog} from "vant";

export default {
  name: "SettingPage",
  methods: {
    ...mapMutations(["RESET_USER_INFO"]),
showOutlogin(){
    Dialog.confirm({
        title: "是否退出登录",
    })
        .then(() => {
            this.outlogin();
        })
        .catch(() => {
            // on cancel
        });
},
    outlogin() {
      this.RESET_USER_INFO();
      this.$router.push({ name: "home" });
      this.$toast("退出成功");
    },
      changepwd(){
        this.$router.push({name:"userChangepwd"});
      }
  },
  data() {
    return {
      rightArrow: require("@/images/icon/order/right_arrow.png")
    };
  }
};
</script>

<style scoped>
#settingPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  overflow: auto;
  background-color: #f6f8fb;
}
.outLoginDiv {
  height: 4rem;
  background-color: white;
  margin: 0 1.3333333333333333rem;
  padding: 0 1.3333333333333333rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contentDiv{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid #f0f1f5;
}


.title {
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}
.rightarrow {
  width: 0.43333333333333335rem;
  height: 0.7333333333333333rem;
}
</style>
